<%--
  Created by IntelliJ IDEA.
  User: 20964
  Date: 2020-05-11
  Time: 18:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../../statics/css/product.css">
    <link rel="stylesheet" href="../../statics/css/iconfont.css">
    <script src="../../statics/layui/layui.all.js"></script>
    <script src="../../statics/js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="container_left">
            <div class="left_main">
                <div style="font-size: 18px;text-align: center;margin-bottom: 10px;color: #b2b2b2">产品分类</div>
                <div>
                    <ul style="">
                        <li style="" id="id1">
                            <div style="float: left;">
                                <i class="iconfont">&#xe6a8;</i>
                                <span>总分类</span>
                            </div>
                            <div style="float: right;" class="three_icons" id="hidden">
                                <i class="iconfont" id="addClassification">&#xe656;</i>
                                <i class="iconfont">&#xe605;</i>
                                <i class="iconfont">&#xe730;</i>
                            </div>
                        </li>
                        <br>
                        <li style="padding-left: 22px;">
                            <div style="float: left;">
                                <i class="iconfont">&#xe6a8;</i>
                                <span>总分类</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container_right">
            <div class="right_main">

            </div>
        </div>
    </div>
</body>
<script>
    show("id1","hidden");
    function show(ID1, ID2){
        console.log(ID1+" " +ID2);

        $("#"+ID1).hover(function(){
            //鼠标进入
            $("#"+ID2).css("opacity","1");
            $("#"+ID2).css("transition-duration","0s");


        },function(){
            //鼠标离开
            $("#"+ID2).css("cursor","pointer");
            $("#"+ID2).css("transition","opacity 0s");
            $("#"+ID2).css("opacity","0");

        });
    }
    var layer = layui.layer;
    $('#addClassification').on('click', function(){

        layer.open({
            type: 2,
            title: '创建产品分类',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area : ['458px' , '158px'],
            content: 'addClassification.jsp'
        });
        // layer.confirm('纳尼？', {
        //     btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
        //     ,btn3: function(index, layero){
        //         //按钮【按钮三】的回调
        //     }
        // }, function(index, layero){
        //     //按钮【按钮一】的回调
        // }, function(index){
        //     //按钮【按钮二】的回调
        // });
    });
</script>
</html>
